<template>
  <footer class="system-footer">
    <nav class="system-footer_navs">
      <ol>
        <li class="system-menus-linker" v-for="menu in menus" :key="menu.linker" :class="{'active': route.name === menu.linker}" @click="goPage(menu)">
          <component :is="menu.icon">ICON</component>
          {{ menu.name }}
        </li>
      </ol>
    </nav>
  </footer>
</template>

<script lang="ts" setup name="FooterBar">
import nocache from '@/store/nocache';
import system from '@/store/system';
import userinfo from '@/store/userinfo';

const route = useRoute();
const router = useRouter();
const { t } = useI18n();
const piniaSystem = system();
const piniaUserinfo = userinfo();
const piniaNocache = nocache();

const data:any = reactive({
  menus: [
    {
      icon: shallowRef(defineAsyncComponent(()=>import('~icons/ic/round-home'))),
      name: computed(()=>t('home.text28')),
      linker: 'Home'
    },
    {
      icon: shallowRef(defineAsyncComponent(()=>import('~icons/ic/sharp-stars'))),
      name: computed(()=>t('home.text29')),
      linker: 'Promotions'
    },
    {
      icon:
      shallowRef(computed(()=>piniaUserinfo.getHaslogged ?
        defineAsyncComponent(()=>import('~icons/fluent/wallet-credit-card16-regular')) :
        defineAsyncComponent(()=>import('~icons/mdi/account-arrow-right')))
      ),
      name: computed(()=>piniaUserinfo.getHaslogged ? t('home.Wallet') : t('home.Signup')),
      linker: computed(()=>piniaUserinfo.getHaslogged ? 'WalletH5' : 'Signup')
    },
    {
      icon:
      shallowRef(computed(()=>piniaUserinfo.getHaslogged ?
        defineAsyncComponent(()=>import('~icons/ic/round-person')) :
        defineAsyncComponent(()=>import('~icons/mdi/account-arrow-up'))
      )),
      name: computed(()=>piniaUserinfo.getHaslogged ? t('home.text30') : t('home.Signin')),
      linker: computed(()=>piniaUserinfo.getHaslogged ? 'Me' : 'Login')
    },
  ]
});

const {
  menus
} = toRefs(data);

const goPage = (menu: any) => {
  if(menu.linker === 'Signup'){
    // 注册
    piniaNocache.openSignup();
  }else if(menu.linker === 'Login'){
    // 登录
    piniaNocache.openLogin();
  }else{
    router.replace({
      name: menu.linker
    });
  }
}
</script>

<style lang="scss">
@import url(./index.scss);
</style>
